<template>
	<div class="table-container">
		<!-- <remoteselect v-model="testValue" style="width: 290px;" clearable url="/api/System/SysEmployeeListSelect"
			valueLabel="SysEmployeeName" valueKey="SysEmployeeID" queryKey="SysEmployeeName__PY" valueType="String"
			multiple>
		</remoteselect>
		<remoteselect v-model="testValue2" style="width: 290px;" clearable url="/api/System/SysEmployeeListSelect"
			valueLabel="SysEmployeeName" valueKey="SysEmployeeID" queryKey="SysEmployeeName__PY" valueType="String">
		</remoteselect> -->
		<el-table ref="tbl" v-loading="loading" :data="list" :height="tblHeight">
			<el-table-column align="right" prop="SysSettingName" label="名称" width="200"></el-table-column>
			<el-table-column align="left" prop="Value" label="值" width="550" :show-overflow-tooltip="false">
				<template v-slot="scope">
					<!--普通文本框-->
					<el-input v-if="scope.row.EditorType==0" v-model="scope.row.Value" style="width: 180px;"></el-input>
					<!--数字文本框-->
					<el-input v-if="scope.row.EditorType==5" v-model="scope.row.Value" style="width: 180px;"></el-input>
					<el-switch v-else-if="scope.row.EditorType==10" v-model="scope.row.Value" on-value="1" off-value="0"
						on-text="是" off-text="否">
					</el-switch>

					<!--远程选择-->
					<el-select v-else-if="scope.row.EditorType==20" v-model="scope.row.Value" clearable filterable
						placeholder="请选择" style="width: 180px;">
					</el-select>

					<!--单选radio-->
					<el-radio-group v-model="scope.row.Value" size="small" v-else-if="scope.row.EditorType==30">
						<el-radio v-for="item in scope.row.Values" :label="item.Value" :key="item.Value" border>
							{{item.Label}}
						</el-radio>
					</el-radio-group>

					<!--多选chebox-->
					<el-checkbox-group v-model="scope.row.Value" v-else-if="scope.row.EditorType==40">
						<el-checkbox v-for="item in scope.row.Values" :label="item.Value" :key="item.Value">
							{{item.Label}}
						</el-checkbox>
					</el-checkbox-group>

					<!--远程选择 获取项目-->
					<remoteselect v-else-if="scope.row.EditorType==100" v-model="scope.row.Value" style="width: 180px;"
						clearable url="/api/System/GoodsListSelect" valueLabel="GoodsName" valueKey="GoodsID"
						valueType="String" queryKey="GoodsName__PY">
					</remoteselect>

					<!--远程选择 获取项目多个-->
					<remoteselect v-else-if="scope.row.EditorType==400" v-model="scope.row.Value" style="width: 290px;"
						clearable url="/api/System/GoodsListSelect" valueLabel="GoodsName" valueKey="GoodsID"
						valueType="String" queryKey="GoodsName__PY" multiple>
					</remoteselect>

					<!--选择多个员工的-->
					<!--操作列fixed="right"导致此组件created执行两次-->
					<remoteselect v-else-if="scope.row.EditorType==500" v-model="scope.row.Value" style="width: 250px;"
						clearable url="/api/System/SysEmployeeListSelect" valueLabel="SysEmployeeName"
						valueKey="SysEmployeeID" queryKey="SysEmployeeName__PY" valueType="String" multiple>
					</remoteselect>
				</template>
			</el-table-column>
			<el-table-column prop="Remark" label="配置描述" align="left"></el-table-column>
			<el-table-column label="操作" v-if="button.保存" width="170">
				<template v-slot="scope">
					<el-button type="text" :loading="loading" size="small" @click="defaultThis(scope.row)"
						v-if="button.保存">还原默认不保存
					</el-button>
					<el-button type="text" :loading="loading" size="small" @click="save(scope.row)" v-if="button.保存">保存
					</el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
	import common from "@/common/common.js";

	export default {
		name: "SysSettingList",
		mixins: [common.baseVM],
		components: {},
		data() {
			return {
				button: {
					保存: true
				},
				list: [],
				search: {},
				loading: false,
				EnumSettingType: 0,
				tblHeight: common.tool.baseTableHeight2(),
				// testValue: [1],
				testValue2: "1",
				testValues: [{
					"Value": "1",
					"Label": "开启"
				}, {
					"Value": "0",
					"Label": "关闭"
				}]
			};
		},
		methods: {
			init() {
				this.getList();
			},

			defaultThis(row) {
				row.Value = row.DefaultValue;
			},

			getSearchData() {
				var r = this.toKeyValue(this.search);
				return r;
			},
			getList() {
				var postData = this.getSearchData();
				this.loading = true;
				this.post("api/System/SysSettingList", postData).then(data => {
					this.list = data.Result;
					this.loading = false;
				}).catch(error => {
					this.loading = false;
				});
			},
			isNumber(number) {
				number = parseFloat(number);
				if (isNaN(number)) {
					return false;
				} else {
					return true;
				}
			},
			save(row) {
				//验证
				if (row.EditorType == 5) {
					if (this.isNumber(row.Value) == false) {
						this.showToast(row.SysSettingName + "必须是数字！", "error");
						return;
					}
					row.Value = parseFloat(row.Value).toString();
				}
				var model = JSON.parse(JSON.stringify(row));
				model.EnumSettingType = this.EnumSettingType;
				if (model.Value instanceof Array) {
					model.Value = model.Value.join(',');
				}
				this.post('api/System/SysSettingSave', model).then((data) => {
					this.showToast(data.Message, "success");
					this.getList();
				});
			}
		},
	};
</script>
